<template>
  <div></div>
</template>
    
<script setup>
import { onMounted } from "vue";
// import { useMapStore } from "../../../stores/Map";
import {useGlobalMap} from '@/utils/globalMap.js'
onMounted(() => {
  const map=useGlobalMap()
  // 1. 视图跳转控件
  const ZoomToExtent = new ol.control.ZoomToExtent({
    extent: [110, 30, 160, 30],
  });
  map.addControl(ZoomToExtent);
  /* 放大和缩小 */
  const zoomslider = new ol.control.ZoomSlider();
  map.addControl(zoomslider);
  const scaleLineControl = new ol.control.ScaleLine({
    /* 设置比例尺单位,degrees,imperial,us,nautical,metric */
    units: "metric",
  });
  map.addControl(scaleLineControl);
});
</script>
    
<style>
.ol-zoomslider {
  top: 7.5em !important;
  background-color: #0d5eff5f !important;
}
</style>